<template>
  <el-input
    size="small"
    placeholder="输入搜索内容"
    class="global-search-input"
    v-model="keyword"
    @keyup.enter.native="search"
  >
    <el-select
      v-model="searchType"
      slot="prepend"
      placeholder="请选择"
    >
      <el-option
        label="人员"
        value="1"
      />
    </el-select>
    <i
      @click="search"
      slot="suffix"
      class="el-input__icon icon-search ri-search-line"
    />
  </el-input>
</template>

<script>
export default {
  name: 'GlobalSearch',
  data () {
    return {
      searchType: '1',
      keyword: ''
    }
  },
  methods: {
    search () {
      this.$root.$emit('globalSearch', this.keyword)
    }
  }
}
</script>

<style lang="scss" scoped>
$bgColor: #3d7de3;

.global-search-input {
  margin-right: 38px;
  width: 291px;

  ::v-deep {
    .el-input__inner,
    .el-input-group__prepend {
      background: transparent;
      border-color: rgba(255, 255, 255, 50%);
    }

    > .el-input__inner {
      border-left: none;
      border-top-right-radius: 18px;
      border-bottom-right-radius: 18px;
      color: #fff;
    }

    .el-input__icon.icon-search {
      font-size: 18px;
      cursor: pointer;
    }

    .el-input-group__prepend {
      width: 58px;
      color: #fff;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      background: rgba(34, 60, 110, 36%);

      .el-input__inner {
        padding: 0 0 0 12px;
      }

      .el-input__icon {
        font-size: 8px;
        width: 12px;
        color: #fff;
      }

      .el-input__suffix {
        right: 2px;
      }
    }

    .el-input__suffix {
      right: 8px;
    }
  }
}
</style>
